<template>
  <div class="card-list">
    <Row v-for="row in list" :key="row.id" :row="row" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive} from 'vue'
import Row from './row.vue'
import {useStore} from "vuex";
import {getInfo} from "@/api/card";
import reload from "@/router/reload.vue";
import store from '@/store';
export default defineComponent({
  components: {
    Row
  },
  setup() {
    const list = reactive ([
      { id: 1, name: '草稿数量', data: '', color: '#4e73df', icon: 'sfont system-yonghu' },
      { id: 2, name: '会签合同', data: '', color: '#1cc88a', icon: 'sfont system-xiaoxi' },
      { id: 3, name: '定稿合同', data: '', color: '#36b9cc', icon: 'sfont system-shuliang_mianxing' },
      { id: 4, name: '审批合同', data: '', color: '#f6c23e', icon: 'sfont system-jindutiaoshouyidaozhang' },
      { id: 5, name: '签订合同', data: '', color: '#54c24a', icon: 'sfont system-page' }
    ])
    let data = {"user_id":store.state.user.id};
    getInfo(data)
    .then(res =>{
      list.forEach(item => {
        const count = res[item.id];
        item.data = count.toString();
      })
      console.log(list);
    }).catch()
    .finally(

    )
    return {
      list
    }
  }
})
</script>

<style lang="scss" scoped>
  .card-list {
    width: calc(100% + 20px);
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;
  }
</style>